<template>
    <view class="anmtbox">
        <view class="felxbox" @tap="toAnnouncementdetails" :data-id="item.id" :data-isread="item.isRead" v-for="(item, index) in pageList" :key="index">
            <view class="box">
                <view class="text1">{{ item.author }}</view>
                <view class="text2">{{ item.title }}</view>
            </view>

            <view class="time">{{ item.createtime }}</view>

            <view class="rd" v-if="item.isRead == 0" :data-id="item.id"></view>
        </view>
    </view>
</template>

<script>
// pages/announcement/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js');

import { getTime } from '../../utils/util.js';
export default {
    data() {
        return {
            marginBottom: app.globalData.marginBottom,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            pageNo: 1,
            pageList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.onfindPageList();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 跳转详情页
        toAnnouncementdetails(e) {
            const { id, isread } = e.currentTarget.dataset;
            uni.navigateTo({
                url: '/pages/announcementdetails/index?id=' + id + '&isread=' + isread
            });
        },

        // 获取全部公告(半年内)
        onfindPageList() {
            _request
                .get(
                    '/bulletin/getBulletinPageList',
                    {
                        userId: uni.getStorageSync('userid'),
                        type: 3
                    },
                    app.globalData.msgType
                )
                .then((res) => {
                    if (res.data.data) {
                        this.setData({
                            pageList: res.data.data.map((item) => {
                                item.createtime = getTime(item.createtime, 6);
                                return item;
                            })
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/announcement/index.wxss */
page {
    background: #fbfbfb;
    position: relative;
}

.anmtbox {
    overflow-y: auto;
}

.felxbox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    /* border-bottom: 1px solid #DADADA; */
    align-items: center;
    margin: 20rpx 20rpx 0 20rpx;
    width: 710rpx;
    height: 204rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 2px;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    position: relative;
}

.box {
    height: 100%;
}

.text1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    width: 500rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.text2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    margin-top: 20rpx;
}

.apptext {
    width: 100%;
}

.header {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.time {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    position: absolute;
    top: 36rpx;
    right: 20rpx;
}

.rd {
    width: 10rpx;
    height: 10rpx;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    background-color: orangered;
    border-radius: 50%;
}
</style>
